<template>
    <ContainerPanel :title=title class="h-100">
        <Swiper class="h-100" :modules="modules" :slides-per-view="3" :space-between="30" scrollbar>
            <!-- 循环生成 SwiperSlide 组件 -->
            <SwiperSlide v-for="i in 10" :key="i">
                <!-- 每个 Slide 的内容 -->
                <div class="slide-content">Slide {{ i }}</div>
            </SwiperSlide>
        </Swiper>
    </ContainerPanel>
</template>

<script setup>
import { ref, defineProps } from 'vue';
import ContainerPanel from './ContainerPanel1.vue';

import { Swiper, SwiperSlide } from 'swiper/vue';
import { Navigation, Pagination, Scrollbar } from 'swiper/modules';
// 引入 Swiper 样式
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';

const modules = ref([Navigation, Pagination, Scrollbar]);

const props = defineProps({
    title: {
        type: String,
        default: "信息板"
    }
})


</script>

<style lang="scss" scoped>
.slide-content {
    user-select: none;
    height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}
</style>